<template>
    <wsPage title="收款账户">
        <div slot="page_operate">
			<Button type="ghost" @click="goback"><Icon type="refresh"></Icon><span>返回</span></Button>
		</div>
        <div class="myAccount" style="">我的收款账户
            <Button style="float:right;margin-top:7px;" @click="showAddAccountModel">添加收款账户</Button>
        </div>
        <!-- <div style="width:100%;height:300px;border:1px solid #efefef;font-size:14px;">
            <div class="myAccountInfo">最多可设置5个收款账户</div>
            <div style="display:flex;">
                <div class="bankAccount" v-for="(item,index) in account.accountList" :key="index">
                    <div class="bankAccountContent">
                        <div>{{item.bankName}}</div>
                        <div>{{item.accountNumber}}</div>
                        <div>{{item.country}}</div>
                    </div> 
                    <div v-if="item.defaultWayInt==1">默认收款方式</div>                 
                </div>
               
            </div>          
        </div> -->
        <wsSmPanel>
            <div slot="list_data">
				<ws-table :data="account.accountList" style="width: 100%">
					<ws-table-column prop="name"  align="center" label="姓名" fixed="left"></ws-table-column>
                    <ws-table-column prop="userCountry"  align="center" label="收款人国家" ></ws-table-column>
                    <ws-table-column prop="bankCountry"  align="center" label="银行开户国家" ></ws-table-column>
                    <ws-table-column prop="accountNumber"  align="center" label="银行账户" ></ws-table-column>
                    <ws-table-column prop="bankName"  align="center" label="银行" ></ws-table-column>
                    <ws-table-column prop="address"  align="center" label="地址" ></ws-table-column>                  
                    <ws-table-column prop="createDate"  align="center" label="创建时间"></ws-table-column>
				</ws-table>
            </div>
        </wsSmPanel>


        <!-- 添加收款账户 -->
        <wsModal v-model="account.show" title="添加收款账户" ok-text="保存" @on-ok="recvResult" @on-cancel="cancelResult">
            <Form ref="modal1" >
                <div>收款人信息</div>
		        <FormItem label="姓名" :label-width="50" required>
		            <Input v-model="account.addAccount.name"  autofocus />
		        </FormItem>		 
                <FormItem label="国家" :label-width="50" required>
		            <Input v-model="account.addAccount.userCountry"  autofocus />
		        </FormItem>	   
                <FormItem label="地址" :label-width="50" required>
		            <Input v-model="account.addAccount.address"  autofocus />
		        </FormItem>	
                <div>银行账户信息</div>
		        <FormItem label="账户号码" :label-width="70" required>
		            <Input v-model="account.addAccount.accountNumber" autofocus />
		        </FormItem>		 
                <FormItem label="银行名称" :label-width="70" required>
		            <Input v-model="account.addAccount.bankName" autofocus />
		        </FormItem>	
                <FormItem label="银行开户国家" :label-width="100" required>
		            <Input v-model="account.addAccount.bankCountry" autofocus />
		        </FormItem>   
                <FormItem label="SWIFT Code" :label-width="100" required>
		            <Input v-model="account.addAccount.swiftCode"  autofocus />
		        </FormItem>	
                <FormItem label="银行地址" :label-width="70" required>
		            <Input v-model="account.addAccount.bankAddress"  autofocus />
		        </FormItem>	   
                <Radio v-model="account.addAccount.defaultWayBool">设为默认收款方式</Radio>     
		    </Form>	
        </wsModal>
    </wsPage>
</template>

<script>
import Util from '../../../common/util.js';
import Common from '../../../common/common.js';
export default {
    data(){
        return{
            account:{
                show:false,
                // 添加收款账户
                addAccount:{                  
                    name:'',//姓名
                    userCountry:'',//收款人国家
                    bankCountry:'',//收款账户开户国家
                    address:'', //地址
                    accountNumber:'',//账户号码
                    bankName:'', //银行名称
                    swiftCode:'',//code
                    defaultWayBool:false ,//是否默认收款
                    bankAddress:'',//银行地址
                },
                accountList:[]
            },
            table:{
                data:[],
                page:{
                    
                }
            }
        }
       
    },
    computed:{

    },
    mounted(){
        this.init();
        this.getAccountList();
    },
    methods:{
        init(){
            this.account.addAccount.name='';
            this.account.addAccount.userCountry='',//收款人国家
            this.account.addAccount.bankCountry='',//银行开户国家
            this.account.addAccount.address='', //地址
            this.account.addAccount.accountNumber='',//账户号码
            this.account.addAccount.bankName='', //银行名称
            this.account.addAccount.swiftCode='',//code
            this.account.addAccount.defaultWayBool=false//是否默认收款
            this.account.addAccount.bankAddress=''; //银行地址
        },
        showAddAccountModel(){
            this.account.show=true;
            this.init();
        },
        recvResult(){
            let postData=this.account.addAccount; //添加的账户表单数据
            let name=postData.name;
            let userCountry=postData.userCountry;
            let bankCountry=postData.bankCountry;
            let address=postData.address;
            let accountNumber=postData.accountNumber;
            let bankName=postData.bankName;  
            let bankAddress=postData.bankAddress;     
            if(Util.vad.isBlank(name)) {
                this.$Message.info('请输入姓名');
                return;
            }else if(Util.vad.isBlank(userCountry)){
                this.$Message.info('请输入收款人国家');
                return;  
            }else if(Util.vad.isBlank(address)){
                this.$Message.info('请输入地址');
                return;  
            }else if(Util.vad.isBlank(accountNumber)){
                this.$Message.info('请输入银行账户');
                return;  
            }else if(Util.vad.isBlank(bankName)){
                this.$Message.info('请输入银行名称');
                return;  
            }else if(Util.vad.isBlank(bankCountry)){
                this.$Message.info('请输入银行开户国家');
                return;  
            }else if(Util.vad.isBlank(bankAddress)){
                this.$Message.info('请输入银行地址');
                return;  
            }


            this.axios.post('/ws/api/ms/receiveMoneyAccount',postData).then(response=>{
                let res=response.data;
                if(res.meta.code==0){
                    this.$Message.info('添加成功');
                    this.account.show=false;
                    this.getAccountList();
                }else{
                    this.$Message.info('添加失败');
                    this.account.show=false;
                }
            })
        },
        cancelResult(){
            this.account.show=false;
        },
        // 获取商户收款账户列表
        getAccountList(){
            this.axios.get('/ws/api/ms/receiveMoneyAccountList').then(response=>{
                let res=response.data;
                if(res.meta.code==0){
                    this.account.accountList=res.data;
                    console.log(res.data);
                }
            })
        },
        goback(){
            this.$router.go(-1);
        }
    }
}
</script>

<style>
    .myAccount{
        width:100%;
        height:44px;
        background-color:#f3f3f3;
        font-size:14px;
        line-height:44px;
    }
    .myAccountInfo{
        width: 95%;
        margin: 20px auto;
        height:44px;
        background-color:#f3f3f3;
        font-size:14px;
        line-height:44px;
    }
    .bankAccount{
        width: 260px;
        height: 140px;
        border: 1px solid gray;
        border-radius: 10px;
        margin-left: 10px;
    }
    .bankAccountContent{
        width:90%;
        height:100px;
        border:1px solid rgba(0,0,0,0);
        margin:20px auto;
        line-height: 30px;
    }
</style>
